07881 成蹊大学のイルミネーションで縦位置写真掲載用の新しいUser CSSを試す

No. 07881, by shio / 塩澤一洋

https://flic.kr/p/2rNvg2B https://live.staticflickr.com/65535/55003879361_6ac139680a_3k.jpg

縦位置写真、好き。ポートレイトなど縦位置写真が多い。

https://flic.kr/p/2rNEZHE https://live.staticflickr.com/65535/55005778980_2efb1625c4_3k.jpg

でも縦位置写真（横辺より縦辺の方が長い画像）をCosense（Scrapbox）に貼る際、そのままだと小さすぎるので、大きく表示するために[[ ]]を付けると、幅が画面いっぱいになるため、縦が長すぎる。写真全体を一度に表示できず、スクロール量も多くなる。見にくい。

https://flic.kr/p/2rNF4D5 https://live.staticflickr.com/65535/55005792170_fa4f423a6c_3k.jpg

そこで、縦位置写真の表示幅を編集エリアの半分に抑制し、左右の中央に表示するUser CSSをChatGPTさんに書いていただきました。ありがたい。

https://flic.kr/p/2rNwAoU https://live.staticflickr.com/65535/55004139624_622c2c3fd7_3k.jpg

code:style.css

/* 1) まず「画像URL」等で貼った画像が縦に伸びすぎるのを抑止（保険） */

img.image {

max-height: 80vh; /* 縦に伸びすぎない */

object-fit: contain;

}

/* 2) 画像URL（= level-3）を「幅50%＆中央寄せ」にする

※ 縦位置の写真を貼るときだけ、URLの前に *** を付ける運用 */

.level-3 img.image {

width: 50% !important;

max-height: none; /* 幅で制御したいので高さ制限を解除 */

display: block;

margin: 0.4em auto; /* 中央寄せ */

}

/* 3) ついでに「小さくした画像」全般は中央寄せになるように（任意） */

.level-1 img.image,

.level-2 img.image,

.level-4 img.image,

.level-5 img.image {

display: block;

margin-left: auto;

margin-right: auto;

}

https://flic.kr/p/2rNqJN4 https://live.staticflickr.com/65535/55002997207_b96a323f28_3k.jpg

掲載した写真は、成蹊大学11号館の周囲に施されたイルミネーション。

https://flic.kr/p/2rNwN5F https://live.staticflickr.com/65535/55004178935_ba399bd9f8_3k.jpg

雨の日を待っていたのになかなか降らなくて、ようやく降雨。

雨の中、撮影しました。

https://flic.kr/p/2rNw7EM https://live.staticflickr.com/65535/55004046353_84534260f8_3k.jpg

https://gyazo.com/c8df74caca3d9181fc391a27f9150b54